<template>
  <div class="page-testpaper">
    <div class="pageposition">
      <!-- 头部开始 -->
      <div class="toppos">
        <Row>
          <!-- logo -->
          <i-col span="5">
            <img src />
          </i-col>
          <!-- 考试科目 -->
          <i-col span="15">
            <p class="t1">高等数学 - 期末测试1</p>
            <p class="t2">《UI设计-全链路培养》</p>
          </i-col>
          <i-col span="4">
            <i-button>提交试卷</i-button>
          </i-col>
        </Row>
      </div>
      <!-- 主体部分 -->
      <div class="bodypos">
        <!-- 左边开始 -->
        <div class="leftpos">
          <!-- 倒计时 -->
          <div class="tickaway">01:15:43</div>
          <!-- 答题卡 -->
          <div class="mainpos">
            <p>答题卡</p>
            <!-- 题型 -->
            <div class="topics">
              <p>单选题</p>
              <span class="directory">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
                <p>7</p>
              </span>
            </div>
            <div class="topics">
              <p>多选题</p>
              <span class="directory">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
                <p>7</p>
              </span>
            </div>
          </div>
        </div>
        <!-- 右边开始 -->
        <div class="rightpos">
          <!-- 题型 -->
          <div class="paperpos">
            <Row>
              <i-col span="1">
                <p></p>
              </i-col>
              <i-col span="20">单选题</i-col>
              <i-col span="3">
                <p>3</p>/15
              </i-col>
            </Row>
          </div>
          <!-- 试题 -->
          <div class="questions">
            <!-- 题目 -->
            <p>
              甲公司20×8年12月31日持有的部分资产和负债项目包括：
              （1）准备随时出售的元；
              （2）因内部研发活动予以资本化的开发支出1200万元，该开发活动形成的资产至20×8年状态；
              （3）将于20×9年3月2日到期的银行借款2000万元，甲公司正在与银行协商将其展期的应收账款3400万元，不考虑其他因素，
              上述资产和负债在甲公司20×8年12月31日资产负债列报的有（ ）。
            </p>
            <!-- 选项 -->

            <!-- 下一题按钮 -->
            <i-button>下一题</i-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lists: {}
    };
  }
};
</script>

<style lang='scss'>
.page-testpaper {
  width: 100%;
  height: 100%;
  .pageposition {
    width: 1175px;
    height: 800px;
    margin: 20px auto;
    .toppos {
      width: 100%;
      .ivu-row {
        width: 100%;
        height: 76px;
        margin-bottom: 20px;
        .ivu-col-span-5 {
          img {
            width: 100%;
            height: 66px;
            border-radius: 2px;
          }
        }
        .ivu-col-span-15 {
          text-align: center;
          .t1 {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 22px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 2px;
            line-height: 33px;
            text-decoration: none;
            padding: 5px 0px;
          }
          .t2 {
            font-family: SourceHanSansSC;
            font-weight: 400;
            font-size: 16px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 26px;
            text-decoration: none;
          }
        }
        .ivu-col-span-4 {
          .ivu-btn {
            width: 150px;
            height: 75px;
            background-color: rgb(86, 142, 240);
            border-color: rgb(187, 187, 187);
            border-width: 1px;
            border-style: solid;
            color: rgb(255, 255, 255);
            border-radius: 4px;
            font-size: 20px;
            padding: 0px;
            text-align: center;
            line-height: 29px;
            font-weight: bold;
            font-style: normal;
            opacity: 1;
          }
        }
      }
      .mark {
        width: 246px;
        height: 66px;
        margin-bottom: 36px;
        border-radius: 2px;
        float: left;
        > img {
          width: 100%;
          height: 66px;
          border-radius: 2px;
        }
      }
    }
    .bodypos {
      width: 100%;
      height: 100%;
      position: relative;
      .leftpos {
        width: 242px;
        height: 800px;
        float: left;
        .tickaway {
          width: 100%;
          height: 76px;
          background-color: #5b96ff;
          border-radius: 2px;
          margin-bottom: 21px;
          font-family: SourceHanSansSC;
          font-weight: 700;
          font-size: 36px;
          color: rgb(251, 251, 251);
          letter-spacing: 3px;
          line-height: 76px;
          text-decoration: none;
          text-align: center;
        }
        .mainpos {
          height: 600px;
          width: 100%;
          border-radius: 2px;
          box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.4);
          border: 1px solid rgba(255, 255, 255, 0);
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 22px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 2px;
            line-height: 70px;
            text-decoration: none;
            text-align: center;
            border-bottom: 1px solid #dce0e7;
          }
          // 题型
          .topics {
            width: 100%;
            height: auto;
            display: flow-root;
            > p {
              padding-top: 10px;
              color: rgba(16, 16, 16, 1);
              font-size: 18px;
              text-align: center;
              font-family: SourceHanSansSC-bold;
            }
            .directory {
              > p {
                width: 30px;
                height: 30px;
                background-color: rgb(255, 255, 255);
                border-color: rgb(91, 150, 255);
                border-width: 1px;
                border-style: solid;
                border-radius: 4px;
                float: left;
                margin: 9px 8px;
                font-size: 14px;
                text-align: center;
                line-height: 26px;
                font-weight: bold;
                font-style: normal;
                font-family: Roboto;
              }
            }
          }
        }
      }
      .rightpos {
        width: 914px;
        height: 800px;
        float: right;
        .paperpos {
          height: 76px;
          width: 100%;
          border-bottom: 1px solid #dce0e7;
          box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.45);
          font-family: Roboto;
          border: 1px solid rgba(255, 255, 255, 0);
          .ivu-row {
            padding-top: 20px;
            .ivu-col-span-1 > p {
              width: 10px;
              height: 32px;
              background-color: rgb(91, 150, 255);
              border: none;
              float: right;
            }
            .ivu-col-span-20 {
              font-family: SourceHanSansSC;
              font-weight: 700;
              font-size: 22px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 33px;
              text-decoration: none;
              padding-left: 10px;
            }
            .ivu-col-span-3 {
              font-family: SourceHanSansSC;
              font-weight: 400;
              font-size: 16px;
              color: rgb(16, 16, 16);
              font-style: normal;
              letter-spacing: 0px;
              line-height: 33px;
              text-decoration: none;
              > p {
                font-weight: 700;
                font-size: 28px;
                line-height: 33px;
                float: left;
              }
            }
          }
        }
        .questions {
          position: relative;
          width: 100%;
          height: 623px;
          padding: 29px 53px 37px 31px;
          box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.4);
          > p {
            font-family: SourceHanSansSC;
            font-weight: 400;
            font-size: 18px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 40px;
            text-decoration: none;
            margin-bottom: 30px;
          }
          .ivu-btn {
            position: absolute;
            left: 80%;
            top: 87%;
            width: 150px;
            height: 50px;
            background-color: rgb(91, 150, 255);
            border: none;
            color: rgb(255, 255, 255);
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
            font-weight: normal;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>